{include file="public/header" /}
{include file="public/nav" /}
<style>
    .designerOne{ background: url(__IMG__/designer_backgroud.jpg) no-repeat center center; background-size: cover;}
</style>

<section class="designerOne">
    <div class="inner flex-between z10">
        <div class="left">
            <div class="swiper-container designerSwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide  ">
                        <img src="{$data.image_url}"   alt="" srcset="">
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="right">
            <div class="title flex-end line-height1 ">
                <span class="name">{$data.name}</span>
                <span class="tipName">/&nbsp;{$data.position}</span>
                <div class="titSmall color-b9 flex-center"><img src="__IMG__/designerIcon01.png" class="designerIcon" alt="" srcset="">从业年限</div>
                <div class="desc">{$data.year}年</div>
            </div>
            <li>
                <div class="titSmall color-b9 flex-center"><img src="__IMG__/designerIcon01.png" class="designerIcon" alt="" srcset="">特色标签</div>
                <div class="desc">{$data.tag}</div>
            </li>
            <li>
                <div class="titSmall color-b9 flex-center"><img src="__IMG__/designerIcon02.png" class="designerIcon" alt="" srcset="">设计理念</div>
                <div class="desc"> {$data.idea}</div>
            </li>
            <li>
                <div class="titSmall color-b9 flex-center"><img src="__IMG__/designerIcon03.png" class="designerIcon" alt="" srcset="">个人简介</div>
                <div class="desc gejlInfo">{$data.desc|raw}</div>
            </li>
        </div>
    </div>
</section>
<style>
    .gejlInfo{ max-height:200px; overflow-y: scroll;    }
    .gejlInfo::-webkit-scrollbar /*滚动条整体样式*/    /*高宽分别对应横竖滚动条的尺寸*/  width: 3px;
    .gejlInfo::-webkit-scrollbar-thumb /*滚动条里面小方块*/border-radius: 3px; background: #e60012; width: 3px;
    .gejlInfo::-webkit-scrollbar-track /*滚动条里面轨道*/border-radius: 3px; background: #888; width: 3px;
</style>
<style>
    .clear25{height:25px;overflow:hidden;clear:both;}
    .designerLeft{width: 925px;}
    .designerRight{width: 300px;}
    .designerLeft .pgcase li .text1 .t1{ font-size: 14px;}
    .designerLeft .sjcazz{ width: 80px; height: 24px;}
    .designerLeft .pgcase li em .hovertext span{ font-size: 12px; height: 32px; line-height: 32px; width: 115px;}
    .designerLeft .pgcase li .text2 .zbut{ width: 100px;height: 32px; line-height: 32px;font-size: 12px;}
</style>
<div class="clear25"></div>
<section class="inner flex-between-start" id="content">
    <div class="designerLeft">
        <section class="designerInfo" style="padding-bottom: 20px;">
            <div class="designerTab">
                <ul class="  flex designerTabTit">
                    <li class="on">他的作品</li>
                    <!--<li>视频作品</li>
                    <li>他的口碑</li>
                    <li>奖项荣誉</li>-->
                </ul>
            </div>
            <div class="bottom">
                <div class=" ">
                    <div class="swiper-container designerTabSwiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide slide01">
                                <ul class="pgcase">
                                    <!-- 9个 -->
                                    {volist name="designer_cases" id="item"}
                                    <li>
                                        <em>
                                            <img src="__IMG__/sjps214.png" class="sjcazz" alt="" srcset="">
                                            <img src="{$item.thumb_url}">
                                            <div class="hovertext">
                                                <span><a href="javascript:void(0);" class="ztsheji">预约设计</a></span>
                                                <span><a href="{:url('cases/detail', ['category_id'=>$item.category_id, 'id'=>$item.id])}" target="_self">查看详情</a></span>
                                            </div>
                                        </em>
                                        <div class="text1">
                                            <a href="{:url('cases/detail', ['category_id'=>$item.category_id, 'id'=>$item.id])}" target="_self">
                                                <div class="t1">【实景】{$item.name}</div>
                                                <div class="t2">{$item.tag_name[0]} | {$item.area}m² | {$item.house_type}</div>
                                            </a>
                                        </div>
                                        <div class="text2">
                                            <div class="people">
                                                <img src="{$data.image_url}">
                                            </div>
                                            <div class="t1">
                                                <p>{$data.name}</p>
                                                <p style="color: #666666;">{$data.position}</p>
                                            </div>
                                            <div class="zbut huaran">
                                                这样装多少钱
                                            </div>
                                        </div>
                                    </li>
                                    {/volist}
                                </ul>
                                <!--<div class="paging"><a href="javascript:;">查看更多</a></div>-->
                            </div>
                            <!--<div class="swiper-slide slide02">
                                <ul class="pgcase">
                                    &lt;!&ndash; 9个 &ndash;&gt;
                                    <div class="emptyContent" style="margin:0 auto;text-align: center;">
                                        <img style="max-width: 70%;margin:0 auto;" src="/static/common/img/empty.png?v=0">

                                    </div>
                                </ul>
                            </div>-->
                            <!--<div class="swiper-slide slide03">
                                <div class="liebiao">
                                    <ol>
                                        <li>
                                            <a href="javascript:;">
                                                <div class="liebiaoPic">
                                                    <img src="">
                                                </div>
                                                <h2>【朋友圈】7月26日，蜀西湖畔业主致辞表扬</h2>
                                            </a>
                                        </li>
                                    </ol>
                                </div>
                                <div class="paging"><a href="javascript:;">查看更多</a></div>
                            </div>-->

                            <div class="swiper-slide slide04">
                                <!--<ul class="designerHonor">
                                    <div class="emptyContent" style="margin:0 auto;text-align: center;">
                                        <img style="max-width: 70%;margin:0 auto;" src="/static/common/img/empty.png?v=0">
                                    </div>
                                </ul>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <div class="designerRight" id="element">
        <div class="add-money reckon">
            <div class="fitup">
                <div class="img-box">
                    <p>预约TA </p>
                    <p>定制我的新家</p>
                </div>
                <div class="fitupSuan">
                    <form id="formfDesignerDetail" onsubmit="return false;">
                    <div class="fitupSuanShuru">
                        <input type="text" class="text" name="username" placeholder="请输入您的姓名">
                    </div>
                    <div class="fitupSuanShuru">
                        <input type="text" class="text" name="contact" placeholder="请输入您的电话号码">
                    </div>
                    <div class="fitupSuanShuru"  >
                        <input type="hidden" name="type_name" value="预约设计师-{$data.name}">
                        <input type="submit" class="sub" onclick="fnFormSubmit('formfDesignerDetail');" value="找TA设计">
                    </div>
                    </form>
                </div>
            </div>
        </div>

        <!--<div class="yuyuegd  mt20">
            <div class="txtMarquee-top">
                <div class="title">已有<span> 23 </span>人预约成功</div>
                <div class="yuyuegd-box">
                    <div class="bd">
                        <div class="tempWrap"  >
                            <ul class="infoList" style="height: 595px; position: relative; padding: 0px; margin: 0px; top: -357px;">
                                <li class="clone" style="height: 35px;"><span>费**</span><span>2024-02-19</span><span>预约成功</span></li>
                                <li style="height: 35px;"><span>赖**</span><span>2024-02-18</span><span>预约成功</span></li>
                                <li style="height: 35px;"><span>郎**</span><span>2024-02-19</span><span>预约成功</span></li>
                                <li style="height: 35px;"><span>冯**</span><span>2024-02-20</span><span>预约成功</span></li>
                                <li style="height: 35px;"><span>阙**</span><span>2024-02-19</span><span>预约成功</span></li>
                                <li style="height: 35px;"><span>潘**</span><span>2024-02-21</span><span>预约成功</span></li>
                                <li style="height: 35px;"><span>都**</span><span>2024-02-18</span><span>预约成功</span></li>
                                <li style="height: 35px;"><span>满**</span><span>2024-02-19</span><span>预约成功</span></li>
                                <li style="height: 35px;"><span>高**</span><span>2024-02-18</span><span>预约成功</span></li>
                                <li style="height: 35px;"><span>骆**</span><span>2024-02-20</span><span>预约成功</span></li>
                                <li style="height: 35px;"><span>费**</span><span>2024-02-19</span><span>预约成功</span></li>
                                <li class="clone" style="height: 35px;"><span>赖**</span><span>2024-02-18</span><span>预约成功</span></li>
                                <li class="clone" style="height: 35px;"><span>郎**</span><span>2024-02-19</span><span>预约成功</span></li>
                                <li class="clone" style="height: 35px;"><span>冯**</span><span>2024-02-20</span><span>预约成功</span></li>
                                <li class="clone" style="height: 35px;"><span>阙**</span><span>2024-02-19</span><span>预约成功</span></li>
                                <li class="clone" style="height: 35px;"><span>潘**</span><span>2024-02-21</span><span>预约成功</span></li>
                                <li class="clone" style="height: 35px;"><span>都**</span><span>2024-02-18</span><span>预约成功</span></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>-->
    </div>
</section>
<div class="des-zzmd" >
    <div class="inner">
        <div class="xq-destitle">
            <h3>在职门店</h3>
        </div>
        <div class="box">
            <div class="img"><img src="__IMG__/ditu.png"></div>
            <div class="right">
                <div class="tit">
                    <h3>八方筑合肥旗舰店</h3>
                    <p>设计案例：{$case_num} | 设计师：{$designer_num}</p>
                </div>
                <div class="tp">
                    <p>联系电话：{$siteConfig.mobile}</p>
                    <p>门店地址：{$siteConfig.address}</p>
                </div>
                <div class="form">
                    <h4>预约到店，享专业设计师免费家装规划</h4>
                    <form id="formfDesignerStore" onsubmit="return false;">
                        <input type="text" class="text" name="name" placeholder="您的姓名">
                        <input type="text" class="text" name="mobile" placeholder="您的电话">
                        <input type="text" class="text" name="building_name" placeholder="小区名称">
                        <input type="hidden" name="type_name" value="预约门店-华然合肥旗舰店">
                        <input type="submit" class="submit" onclick="fnFormSubmit('formfDesignerStore');" placeholder="立即预约">
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{include file="public/left" /}
<!-- footer -->
{include file="public/footer" /}
<script>
    $('#element').hcSticky({
        stickTo: '#content',
        top:50,
        bottomEnd:70,
        followScroll:false
    });

    var designerSwiper = new Swiper('.designerSwiper', {
        speed: 500,
        pagination: {
            el: '.designerSwiper .swiper-pagination',
            clickable: true,
        },

    })

    var tabSwiper = new Swiper('.designerTabSwiper', {
        speed: 500,
//   autoHeight: true,
        on: {
            slideChangeTransitionStart: function () {
                $(".designerTabTit .on").removeClass('on');
                $(".designerTabTit li").eq(this.activeIndex).addClass('on');
            }
        }
    })
    $(".designerTabTit li").hover(function (e) {
            e.preventDefault()
            $(".designerTabTit .on").removeClass('on')
            $(this).addClass('on')
            tabSwiper.slideTo($(this).index())

        }
    );

    //文字
    jQuery(".yuyuegd .txtMarquee-top").slide({
        mainCell: ".bd ul",
        autoPlay: true,
        effect: "topMarquee",
        vis: 3,
        interTime: 50,
        trigger: "click"
    });
</script>